<template>
    <el-collapse v-model="activeNames" class="mj-options">
        <el-collapse-item title="高级参数" name="1">
            <template #title>
                <div class="flex items-center gap-2">
                    <span class="font-bold">高级参数</span>
                </div>
            </template>

            <div v-if="config?.complex_params" class="flex flex-col gap-2">
                <div v-for="(item, key) in config?.complex_params" :key="key">
                    <div class="flex items-center gap-2 mb-2">
                        <span>{{ item.name }}</span>
                        <el-popover
                            placement="right"
                            :width="200"
                            :show-arrow="false"
                            transition="custom-popover"
                            trigger="hover"
                            :content="item.tips"
                        >
                            <template #reference>
                                <div class="flex items-center cursor-pointer text-[#999999]">
                                    <icon
                                        name="el-icon-QuestionFilled"
                                        :size="14"
                                    />
                                </div>
                            </template>
                        </el-popover>
                    </div>
                    <div v-if="item.type === 'slider'" class="flex gap-4 items-center pl-3">
                        <el-slider
                            v-model="modelValue[key]"
                            :step="item.step"
                            :min="item.range[0]"
                            :max="item.range[1]"
                        />
                        <span>{{ modelValue[key] }}</span>
                    </div>
                    <div v-else-if="item.type === 'number'" class="flex gap-4 items-center">
                        <el-input
                            v-model="modelValue.seed"
                            type="number"
                            :min="-1"
                            :maxlength="18"
                            :placeholder="item?.placeholder||''"
                        />
                    </div>
                </div>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'
import { config } from '../../hooks/useDrawEffect'

const emits = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {
            return {
                seed: '', // 随机种子
                iw: 1,
                q: 1,
                s: 100,
                c: 0
            }
        }
    }
})

const { modelValue } = useVModels(props, emits)

const activeNames = ref<string>('1')
</script>
